﻿@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<style>
    label { display: block; }
.validationMessage { color: Red; }
.customMessage { color: Orange; }
</style>
<script id="customMessageTemplate" type="text/html">
    <em class="customMessage" data-bind='validationMessage: field'></em>
</script>
<fieldset>
    <legend>User: <span data-bind='text: errors().length'></span> errors</legend>
    <label>First name: <input data-bind='value: firstName'/></label>
    <label>Last name: <input data-bind='value: lastName'/></label>    
    <div data-bind='validationOptions: { messageTemplate: "customMessageTemplate" }'>
        <label>Email: <input data-bind='value: emailAddress' required/></label>
        <label>Location: <input data-bind='value: location'/></label>
        <label>Age: <input data-bind='value: age' required/></label>
    </div>
    <label>
        Subscriptions: 
        <select data-bind='value: subscription, options: subscriptionOptions, optionsCaption: "Choose one..."'></select>
    </label>
    <label>Password: <input data-bind='value: password' type="password"/></label>
    <label>Retype password: <input data-bind='value: confirmPassword' type="password"/></label>
    <label>10 + 1 = <input data-bind='value: captcha'/></label>
</fieldset>
<button type="button" data-bind='click: submit'>Submit</button>
<br />
<br />
<button type="button" data-bind='click: requireLocation'>Make 'Location' required</button>

@section scripts
{

<script>
    //ko.validation.rules.pattern.message = 'Invalid.';


    //ko.validation.configure({
    //    registerExtenders: true,
    //    messagesOnModified: true,
    //    insertMessages: true,
    //    parseInputAttributes: true,
    //    messageTemplate: null
    //});


    var captcha = function (val) {
        return val == 11;
    };

    var mustEqual = function (val, other) {
        return val == other();
    };

    var viewModel = {
        firstName: ko.observable().extend({ minLength: 2, maxLength: 10 }),
        lastName: ko.observable().extend({ required: true }),
        emailAddress: ko.observable().extend({  // custom message
            required: { message: 'Please supply your email address.' }
        }),
        age: ko.observable().extend({ min: 1, max: 100 }),
        location: ko.observable(),
        subscriptionOptions: ['Technology', 'Music'],
        subscription: ko.observable().extend({ required: true }),
        password: ko.observable(),
        captcha: ko.observable().extend({  // custom validator
            validation: { validator: captcha, message: 'Please check.' }
        }),
        submit: function () {
            if (viewModel.errors().length == 0) {
                alert('Thank you.');
            } else {
                alert('Please check your submission.');
                viewModel.errors.showAllMessages();
            }
        }
    };

    viewModel.confirmPassword = ko.observable().extend({
        validation: { validator: mustEqual, message: 'Passwords do not match.', params: viewModel.password }
    }),

    viewModel.errors = ko.validation.group(viewModel);

    viewModel.requireLocation = function () {
        viewModel.location.extend({ required: true });
    };

    ko.applyBindings(viewModel);
</script>
        
}